<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML PUBLIC "" "">
<f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:w="http://www.apusic.com/jsf/widget" xmlns:layout="http://www.apusic.com/jsf/layout"
	xmlns:h="http://java.sun.com/jsf/html" xmlns:ajax="http://www.apusic.com/jsf/ajax"
	renderKitId="AJAX">
	<w:head cache="false">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<w:stylesheet src="/css/kmp4.css" type="text/css"></w:stylesheet>
		<w:script src="/javascript/selectComponent.js" type="text/javascript" language="UTF-8"></w:script>
	</w:head>
	<w:page title="请选择">
		<layout:borderLayout fitToBody="true" border="false" fit="true" margins="0 0 0 0">
			<layout:panel region="west" border="true" height="320" width="200">
				<layout:borderLayout border="false" fit="true" margins="0 0 0 0">
					<layout:panel region="north" border="false" height="30"
						style="background-color: #DFDFDF; vertical-align: middle">
						<layout:panelGrid columns="2">
							<layout:cell style="height:30px;">
								<h:outputLabel value="快速搜索" for="searchImage"></h:outputLabel>
								<h:graphicImage url="/images/quicksearch.png" id="searchImage"></h:graphicImage>
							</layout:cell>
							<layout:cell style="height:30px;">
								<w:textField id="dm_txt" jsvar="dm_txt_jsvar" onfocus="javascript:expandTree();"
									onkeyup="javascript:searchTree(dm_txt_jsvar.getValue());"></w:textField>
							</layout:cell>
						</layout:panelGrid>
					</layout:panel>
					<layout:panel region="center" border="false" height="250" autoScroll="true">
						<w:tree id="dm_selectTree" jsvar="dm_selectTree_jsvar" expandAll="true" rootVisible="false"
							autoScroll="true" />
					</layout:panel>
				</layout:borderLayout>
			</layout:panel>
			<layout:panel region="center" border="false" height="320" autoScroll="false" width="50">
				<div style="height: 45px;"></div>
				<w:form>
					<layout:panelGrid columns="1" align="center" style="height:100%;">
						<layout:cell width="30" align="center" valign="middle" style="height:100%;">
							<w:button label="&gt;&gt;" onclick="javascript:moveAll();" width="40" alwaysSubmit="false"
								rendered="false" />
							<w:button label="&lt;&lt;" onclick="javascript:removeAll();" width="40" alwaysSubmit="false"
								tooltip="将右侧的内容全部清除" />
							<w:separator />
							<w:button label="上移" onclick="javascript:moveUp();" alwaysSubmit="false" tooltip="选中的内容上移" />
							<w:button label="下移" onclick="javascript:moveDown();" alwaysSubmit="false" tooltip="选中的内容下移" />
						</layout:cell>
					</layout:panelGrid>
				</w:form>
			</layout:panel>
			<layout:panel region="east" border="true" height="320" width="220" autoScroll="false">
				<layout:borderLayout border="false" fit="true" margins="0 0 0 0">
					<layout:panel region="north" border="false" height="30">
						<div style="height: 30px; vertical-align: middle; background-color: #DFDFDF;">
						<h:outputLabel value="已选择："></h:outputLabel>
						</div>
					</layout:panel>
					<layout:panel region="center" border="false" height="250">
						<layout:panelGrid columns="2">
							<layout:cell width="180">
								<select id="selectedId" name="selectedId" style="display: none" size="20"></select>
								<select id="selectedValue" name="selectedValue"
									style="width: 215px; height: 315px; border: 1px solid #9A9A9A;" size="20"
									ondblclick="javascript:removeSelectedOption();">
								</select>
							</layout:cell>
						</layout:panelGrid>
					</layout:panel>
				</layout:borderLayout>
			</layout:panel>
			<layout:panel border="true" region="south" height="30">
				<div
					style="height: 30px; vertical-align: middle; background-color: #DFDFDF; text-align: center;">
				<w:form>
					<layout:panelGrid columns="2" style="vertical-align: middle" align="center">
						<layout:cell style="height:30px;" align="right">
							<w:button label="确定" image="/images/save.gif" onclick="fillSelectedOption(idJsvar,nameJsvar)"
								alwaysSubmit="false" />
						</layout:cell>
						<layout:cell style="height:30px;">
							<w:button value="取消" image="/images/cancel.gif" onclick="window.close()" immediate="true"
								alwaysSubmit="false" />
						</layout:cell>
					</layout:panelGrid>
				</w:form>
				</div>
			</layout:panel>
		</layout:borderLayout>
	</w:page>
	<script>
	//<![CDATA[
	var hiddenPkgs = [];
	var filter=null;
	var initPara= window.dialogArguments;
	var parentWindow  = initPara[0];
	var idJsvar=initPara[1];
	var nameJsvar  =initPara[2];
	//初始化已经选的值
	initSelectedOption(idJsvar,nameJsvar);
	Ext.onReady(function (){
		filter = new Ext.tree.TreeFilter(dm_selectTree_jsvar, {
		clearBlank: true,
		autoClear: true
		});
		dm_selectTree_jsvar.on('click',function(node){
			if(node.attributes.expanded&&node!=dm_selectTree_jsvar.root){
				if(idJsvar){
					var idField=getIdField();
					addValueToSelectOption(idField,node.attributes.hrefTarget);
				}
				if(nameJsvar){
					var valueField=getValueField();
					addValueToSelectOption(valueField,node.text);
				}
			}
		});
	});
	function expandTree(){
		dm_selectTree_jsvar.expandAll();
	}
	function searchTree(text){
			if(!text){
				filter.clear();
				return;
			}
			var re = new RegExp(text, 'i');
			filter.filterBy(function(n){
				return !n.attributes.expanded||re.test(n.text);
			});
	}
	//]]></script>
</f:view>